<template>
	<scroll-view scroll-y="true" :style="{ height: scorllHeight + 'px', width: '690rpx' }">
		<index-swiper :list="swiperList"></index-swiper>
		<view class="page-main-title">
			<text class="page-main-title-text">精选文章</text>
			<view class="page-main-title-right">
				<text class="page-main-title-right-text">更多</text>
				<hz-icon name="right" size="32rpx" color="#fff"></hz-icon>
			</view>
		</view>
		<news-item :list="newsList"></news-item>
		<view class="page-main-title">
			<text class="page-main-title-text">项目展示</text>
			<view class="page-main-title-right">
				<text class="page-main-title-right-text">更多</text>
				<hz-icon name="right" size="32rpx" color="#fff"></hz-icon>
			</view>
		</view>
		<project-item></project-item>
	</scroll-view>
</template>

<script>
import indexSwiper from '@/components/indexSwiper/indexSwiper.vue';
import newsItem from '@/components/newsItem/newsItem.vue';
import projectItem from '@/components/projectItem/projectItem.vue';
export default {
	components: { indexSwiper, newsItem, projectItem },
	mounted() {
		this.setScrollHeight();
	},
	data() {
		return {
			scorllHeight: 0,
			swiperList: [
				{
					id: 1,
					src: 'https://picsum.photos/750/300?id=1'
				},
				{
					id: 2,
					src: 'https://picsum.photos/750/300?id=1'
				}
			],
			newsList: [
				{
					id: 1,
					img: 'https://picsum.photos/200/200?id=23',
					title: '标题标题标题标题标题标题标题标题标题',
					content:
						'内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
					time: '2025/1/7',
					praise: 99,
					check: 20
				},
				{
					id: 2,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				}
			]
		};
	},

	methods: {
		setScrollHeight() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					let windowHeight = res.windowHeight; //屏幕高度
					// 获取手机顶部状态栏的高度
					const statusBarHeight = res.statusBarHeight || 0;
					// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
					// 计算顶部图标距离
					const topIconDistance = statusBarHeight + navBarHeight;

					// 总高度 减去 顶部高度 减去 tabbar高度
					that.scorllHeight = res.windowHeight - topIconDistance - 132;
					// this.topIconDistance = topIconDistance; //单位px
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
